<template>
	<view class="container">
		<!-- 商家头部信息 -->
		<view class="shop-header">
			<!-- 店铺封面图 -->
			<view class="shop-banner-container">
				<image class="shop-banner" :src="getImageUrl(shopInfo.shopAvatar)" mode="aspectFill"></image>
			</view>
			<!-- 店铺基本信息卡片 -->
			<view class="shop-card">
				<view class="shop-main-info">
					<image class="shop-logo" :src="getImageUrl(shopInfo.shopAvatar)" mode="aspectFill"></image>
					<view class="shop-basic">
						<view class="shop-name-rating">
							<text class="shop-name">{{ shopInfo.shopName || '加载中...' }}</text>
							<view class="rating">
								<text class="star">★</text>
								<text class="score">{{ shopInfo.shopGrade || 5.0 }}</text>
							</view>
							<view class="collect-btn" @click="toggleCollect">
								<text class="icon">{{ isCollected ? '❤️' : '♡' }}</text>
								<text>{{ isCollected ? '已收藏' : '收藏' }}</text>
							</view>
						</view>
						<view class="shop-tags">
							<view class="shop-tag" v-if="shopInfo.categoryName">{{ shopInfo.categoryName }}</view>
							<view class="shop-tag" v-if="shopInfo.shopStatus === 1">营业中</view>
							<view class="shop-tag status-closed" v-if="shopInfo.shopStatus === 0">已关闭</view>
							<view class="shop-tag status-rest" v-if="shopInfo.shopStatus === 2">休息中</view>
						</view>
						<view class="shop-hours" v-if="shopInfo.shopStart && shopInfo.shopEnd">
							<text class="icon">⏰</text>
							<text>营业时间: {{ formatTime(shopInfo.shopStart) }} - {{ formatTime(shopInfo.shopEnd) }}</text>
						</view>
					</view>
				</view>

				<!-- 配送信息 -->
				<view class="delivery-info">
					<view class="delivery-item">
						<text class="label">配送费:</text>
						<text class="value">￥{{ deliveryInfo.deliveryFee || 0 }}</text>
					</view>
					<view class="delivery-item">
						<text class="label">起送价:</text>
						<text class="value">￥{{ deliveryInfo.minOrderPrice || 0 }}</text>
					</view>
					<view class="delivery-item">
						<text class="label">配送距离:</text>
						<text class="value">{{ deliveryInfo.distance || 0 }}km</text>

					</view>
				</view>
			</view>
		</view>

		<!-- 标签页导航 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: activeTab === 'menu' }" @click="switchTab('menu')">
				<text>点菜</text>
				<view class="tab-underline" v-if="activeTab === 'menu'"></view>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'reviews' }" @click="switchTab('reviews')">
				<text>评价</text>
				<view class="tab-underline" v-if="activeTab === 'reviews'"></view>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'info' }" @click="switchTab('info')">
				<text>商家</text>
				<view class="tab-underline" v-if="activeTab === 'info'"></view>
			</view>
		</view>

		<!-- 点菜标签页内容 -->
		<view v-if="activeTab === 'menu'">
			<!-- 搜索框 -->
			<view class="search-box" @click="goSearch">
				<text class="icon">🔍</text>
				<input placeholder="搜索店内商品" disabled />
			</view>

			<!-- 商品区域 -->
			<view class="product-area">
				<!-- 左侧分类-->
				<scroll-view class="category-sidebar" scroll-y :scroll-top="categoryScrollTop">
					<view class="sidebar-item" :class="{active: activeCategoryId === null}"
						@click="selectCategory(null)">
						全部商品
						<view class="item-count" v-if="getTotalProductCount() > 0">
							{{ getTotalProductCount() }}
						</view>
					</view>
					<view class="sidebar-item" v-for="category in filteredCategories" :key="category.id"
						:class="{active: activeCategoryId === category.id}" @click="selectCategory(category.id)">
						{{ category.categoryName }}
						<view class="item-count" v-if="getCategoryProductCount(category.id) > 0">
							{{ getCategoryProductCount(category.id) }}
						</view>
					</view>
				</scroll-view>

				<!-- 商品列表 - 滑动 -->
				<scroll-view class="product-list" scroll-y :scroll-top="productScrollTop" @scroll="handleProductScroll">
					<view class="loading" v-if="loading">
						<uni-load-more size="24" color="#ff5a5f"></uni-load-more>
						<text>加载中...</text>
					</view>

					<!-- 全部商品（分类） -->
					<view v-if="activeCategoryId === null && !loading">
						<view v-for="category in filteredCategories" :key="category.id" :id="'category-' + category.id"
							v-if="getProductsByCategoryId(category.id).length > 0">
							<view class="product-category">{{ category.categoryName }}</view>
							<view class="product-list-wrap">
								<view class="product-item" v-for="product in getProductsByCategoryId(category.id)"
									:key="product.id" @click="showProductDetail(product)">
									<image class="product-image" :src="getImageUrl(product.productImage)"
										mode="aspectFill" />
									<view class="product-info">
										<view class="product-name">{{ product.productName }}</view>
										<view class="product-desc">{{ product.description || '暂无描述' }}</view>
										<view class="product-price">￥{{ product.price }}</view>
									</view>
									<!-- 数量控制组件 -->
									<view class="number-control">
										<uni-number-box :min="0" :value="product.quantity || 0"
											@change="handleQuantityChange(product, $event)"
											:disabled="product.status !== 1"></uni-number-box>
									</view>
								</view>
							</view>
						</view>
						<view class="empty-tip" v-if="getTotalProductCount() === 0">
							<image src="/static/icons/empty.png" mode="widthFix"></image>
							<text>暂无商品</text>
						</view>
					</view>

					<!-- 单个分类商品 -->
					<view v-else-if="!loading">
						<view class="product-category">{{ getCategoryName(activeCategoryId) }}</view>
						<view class="product-list-wrap">
							<view class="product-item" v-for="product in getProductsByCategoryId(activeCategoryId)"
								:key="product.id" @click="showProductDetail(product)">
								<image class="product-image" :src="getImageUrl(product.productImage)"
									mode="aspectFill" />
								<view class="product-info">
									<view class="product-name">{{ product.productName }}</view>
									<view class="product-desc">{{ product.description || '暂无描述' }}</view>
									<view class="product-price">￥{{ product.price }}</view>
								</view>
								<view class="number-control">
									<uni-number-box :min="0" :value="product.quantity || 0"
										@change="handleQuantityChange(product, $event)"
										:disabled="product.status !== 1"></uni-number-box>
								</view>
							</view>
							<view class="empty-tip" v-if="getProductsByCategoryId(activeCategoryId).length === 0">
								<text>该分类下暂无商品</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 评价标签页内容 -->
		<view v-if="activeTab === 'reviews'" class="reviews-container">
			<view class="reviews-summary">
				<view class="overall-score">
					<text class="score">{{ shopInfo.shopGrade || 5.0 }}</text>
					<view class="stars">
						<view class="stars-bg">★★★★★</view>
						<view class="stars-fg" :style="{ width: (shopInfo.shopGrade / 5 * 100) + '%' }">★★★★★</view>
					</view>
					<text class="desc">店铺评分</text>
				</view>
				<view class="score-details">
					<view class="score-item" v-for="(score, key) in reviewsScoreDistribution" :key="key">
						<text class="label">{{ key }}</text>
						<view class="progress-bar">
							<view class="progress" :style="{ width: score + '%' }"></view>
						</view>
						<text class="value">{{ score }}%</text>
					</view>
				</view>
			</view>

			<view class="reviews-filter">
				<view class="filter-item" :class="{ active: reviewFilter === 'all' }" @click="reviewFilter = 'all'">全部
				</view>
				<view class="filter-item" :class="{ active: reviewFilter === 'withImage' }"
					@click="reviewFilter = 'withImage'">有图</view>
				<view class="filter-item" :class="{ active: reviewFilter === 'highScore' }"
					@click="reviewFilter = 'highScore'">高分</view>
				<view class="filter-item" :class="{ active: reviewFilter === 'lowScore' }"
					@click="reviewFilter = 'lowScore'">低分</view>
			</view>

			<scroll-view class="reviews-list" scroll-y>
				<view class="review-item" v-for="review in filteredReviews" :key="review.id">
					<view class="review-header">
						<image class="avatar" :src="getReviewAvatar(review)" mode="aspectFill"></image>
						<view class="user-info">
							<text class="username">{{ getReviewUsername(review) }}</text>
							<view class="stars">
								<!-- 灰色背景星星（未选中） -->
								<view class="stars-bg">★★★★★</view>
								<!-- 黄色前景星星（选中） -->
								<view class="stars-fg" :style="{ width: (review.score / 5) * 100 + '%' }">★★★★★</view>
							</view>
						</view>
						<text class="time">{{ formatReviewTime(review.createTime) }}</text>
					</view>

					<view class="review-content" v-if="review.content">
						{{ review.content }}
					</view>

					<!-- 评价图片-->
					<view class="review-images" v-if="review.images && review.images.split(',').length > 0">
						<view class="review-image-wrapper" v-for="(img, index) in review.images.split(',')"
							:key="index">
							<image class="review-image" :src="getImageUrl(img)" mode="aspectFill" :lazy-load="true"
								@error="handleImageError($event, img)"></image>
						</view>
					</view>

					<view class="review-reply" v-if="review.replyContent">
						<text class="reply-label">商家回复：</text>
						<text class="reply-content">{{ review.replyContent }}</text>
						<text class="reply-time" v-if="review.replyTime">{{ formatReviewTime(review.replyTime) }}</text>
					</view>
				</view>

				<view class="empty-tip" v-if="reviews.length === 0 && !loadingReviews">
					<image src="/static/icons/empty.png" mode="widthFix"></image>
					<text>暂无评价</text>
				</view>

				<view class="loading" v-if="loadingReviews">
					<uni-load-more size="24" color="#ff5a5f"></uni-load-more>
					<text>加载评价中...</text>
				</view>
			</scroll-view>
		</view>

		<!-- 商家标签页内容 -->
		<view v-if="activeTab === 'info'" class="shop-info-container">
			<view class="basic-info-card">
				<view class="info-item">
					<text class="label">店铺名称</text>
					<text class="value">{{ shopInfo.shopName || '暂无信息' }}</text>
				</view>
				<view class="info-item">
					<text class="label">经营类目</text>
					<text class="value">{{ deliveryInfo.categoryName || '暂无信息' }}</text>
				</view>
				<view class="info-item">
					<text class="label">店铺等级</text>
					<text class="value">{{ shopInfo.shopGrade || '暂无评分' }}</text>
				</view>
				<view class="info-item">
					<text class="label">店铺地址</text>
					<text class="value">{{ shopInfo.shopAddress || '暂无信息' }}</text>
				</view>
				<view class="info-item">
					<text class="label">营业时间</text>
					<text class="value">
						{{ shopInfo.shopStart ? formatTime(shopInfo.shopStart) : '00:00' }} -
						{{ shopInfo.shopEnd ? formatTime(shopInfo.shopEnd) : '00:00' }}
					</text>
				</view>
				<view class="info-item">
					<text class="label">店铺简介</text>
					<text class="value">{{ shopInfo.shopDescrible || '暂无简介' }}</text>
				</view>
			</view>

			<view class="image-info-card">
				<text class="card-title">实体图片</text>
				<view class="image-preview" @click="previewImage(shopInfo.shopImage)">
					<image class="shop-image" :src="getImageUrl(shopInfo.shopImage)" mode="aspectFill"></image>
				</view>
			</view>

			<view class="business-license-card">
				<text class="card-title">商家档案</text>
				<view class="image-preview" @click="previewImage(shopInfo.foodSafe)" v-if="shopInfo.foodSafe">
					<image class="license-image" :src="getImageUrl(shopInfo.foodSafe)" mode="aspectFill"></image>
				</view>
			</view>
		</view>


		<!-- 底部购物车栏 -->
		<view class="cart-footer" v-if="activeTab === 'menu' && !loading">
			<view class="cart-icon" @click="toggleCart">
				<image src="/static/store/cart2.png" mode="widthFix"></image>
				<view class="cart-badge" v-if="cart.totalQuantity > 0">{{ cart.totalQuantity }}</view>
			</view>
			<view class="cart-info" @click="toggleCart">
				<view class="cart-total">
					<text>总价：</text>
					<text
						class="total-price">￥{{ (cart.totalPrice + (deliveryInfo.deliveryFee || 0)).toFixed(2) }}</text>
				</view>
				<view class="cart-subtip" v-if="cart.totalPrice < shopInfo.minOrderPrice">
					<text class="subtip-text">还差￥{{ (shopInfo.minOrderPrice - cart.totalPrice).toFixed(2) }}起送</text>
				</view>
				<view class="cart-subtip delivery-fee-line" v-if="cart.totalPrice > 0">
					<text>含配送费：￥{{ deliveryInfo.deliveryFee || 0 }}</text>
				</view>
			</view>
			<view class="checkout-btn" @click="goToCheckout"
				:class="{disabled: cart.totalQuantity === 0 || cart.totalPrice < shopInfo.minOrderPrice}">
				去结算
			</view>
		</view>

		<!-- 购物车弹窗 -->
		<view class="cart-popup" v-if="showCart">
			<view class="cart-popup-mask" @click="toggleCart"></view>
			<view class="cart-popup-content">
				<view class="cart-header">
					<text class="title">购物车</text>
					<view class="clear-btn" @click="clearCart" v-if="cart.totalQuantity > 0">
						清空
					</view>
				</view>
				<scroll-view class="cart-items" scroll-y>
					<view class="cart-item" v-for="item in cart.items" :key="item.id">
						<image class="item-image" :src="getImageUrl(item.productImage)" mode="aspectFill" />
						<view class="item-info">
							<view class="item-name">{{ item.productName }}</view>
							<view class="item-price">￥{{ item.productPrice }}</view>
						</view>
						<view class="cart-number-control">
							<uni-number-box :min="0" :value="item.number"
								@change="handleCartItemChange(item, $event)"></uni-number-box>
						</view>
					</view>
					<view class="cart-empty" v-if="cart.totalQuantity === 0">
						<image src="/static/icons/empty-cart.png" mode="widthFix"></image>
						<text>购物车是空的</text>
					</view>
				</scroll-view>
				<!-- 底部结算 -->
				<view class="cart-footer-info" v-if="cart.totalQuantity > 0">
					<view class="footer-line">
						<text>商品总价：</text>
						<text class="price">￥{{ cart.totalPrice.toFixed(2) }}</text>
					</view>
					<view class="footer-line">
						<text>配送费：</text>
						<text class="price">￥{{ deliveryInfo.deliveryFee || 0 }}</text>
					</view>
					<view class="footer-line total">
						<text>合计：</text>
						<text class="price">￥{{ (cart.totalPrice + (deliveryInfo.deliveryFee || 0)).toFixed(2) }}</text>
					</view>
					<view class="confirm-btn" @click="goToCheckout">
						确认结算
					</view>
				</view>
			</view>
		</view>

		<!-- 距离输入弹窗 -->
		<view class="distance-modal" v-if="showDistanceModal">
			<view class="modal-mask" @click="closeDistanceModal"></view>
			<view class="modal-content">
				<view class="modal-title">输入配送距离(km)</view>
				<input type="number" v-model.number="deliveryInfo.distance" step="0.1" min="0" class="distance-input" />
				<view class="modal-buttons">
					<button class="cancel-btn" @click="closeDistanceModal">取消</button>
					<button class="confirm-btn" @click="confirmDistance">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getProductCategories,
		getProductsByCategory
	} from '@/api/product/product';
	import {
		calculateDeliveryFee
	} from '@/api/shop/delivery';
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
	import uniLoadMore from '@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue';

	export default {
		components: {
			uniNumberBox,
			uniLoadMore
		},
		data() {
			return {
				shopId: null,
				businessId: null,
				shopInfo: {
					shopName: '',
					shopAvatar: '',
					shopDescrible: '',
					categoryName: '',
					shopStatus: 1,
					shopStart: '',
					shopEnd: '',
					shopGrade: 5.0,
					minOrderPrice: 0,
					longitude: null,
					latitude: null,
					shopImage: '',
					shopLicense: '',
					foodSafe: '',
					shopAddress: '',
					shopCategory: ''
				},
				deliveryInfo: {
					deliveryFee: 0,
					minOrderPrice: 0,
					distance: 0,
					categoryName: ''
				},
				showDistanceModal: false,
				isCollected: false,
				allCategories: [], // 所有分类
				products: {}, // 按分类ID存储商品 
				activeCategoryId: null,
				loading: false,
				categoryScrollTop: 0,
				productScrollTop: 0,
				categoryPositions: {}, // 存储各分类在滚动区域中的位置
				// 购物车
				cart: {
					id: null,
					items: [],
					totalPrice: 0,
					totalQuantity: 0
				},
				showCart: false, // 购物车弹窗控制
				// 配送
				distance: 2.0, // 默认距离
				// 标签页
				activeTab: 'menu', // menu, reviews, info
				// 评价
				reviews: [],
				loadingReviews: false,
				reviewFilter: 'all', // all, withImage, highScore, lowScore
				reviewsScoreDistribution: {
					'5星': 0,
					'4星': 0,
					'3星': 0,
					'2星': 0,
					'1星': 0
				}
			};
		},
		computed: {
			// 过滤出当前商家的分类
			filteredCategories() {
				return this.allCategories
					.filter(cat => cat.categoryStatus === 1)
					.map(cat => ({
						id: cat.id,
						categoryName: cat.categoryName
					}));
			},
			// 根据筛选条件过滤评价
			filteredReviews() {
				if (this.reviewFilter === 'all') {
					return this.reviews;
				} else if (this.reviewFilter === 'withImage') {
					return this.reviews.filter(review => review.images && review.images.trim() !== '');
				} else if (this.reviewFilter === 'highScore') {
					return this.reviews.filter(review => review.score >= 4);
				} else if (this.reviewFilter === 'lowScore') {
					return this.reviews.filter(review => review.score <= 2);
				}
				return this.reviews;
			}
		},
		async onLoad(options) {
			this.shopId = Number(options.shopId) || null
			this.businessId = Number(options.businessId) || null

			if (!this.shopId && !this.businessId) {
				uni.showToast({
					title: '缺少商家参数',
					icon: 'none'
				})
				uni.navigateBack()
				return
			}
			// 解析父组件传入的配送信息
			if (options.deliveryInfo) {
				try {
					this.deliveryInfo = JSON.parse(decodeURIComponent(options.deliveryInfo));

				} catch (e) {
					console.error('解析配送信息失败:', e);
				}
			}

			// 检查登录状态
			const isLogin = this.$store.getters['user/isLogin'];
			if (!isLogin) {
				uni.navigateTo({
					url: `/pages/login/login?redirect=${encodeURIComponent('/pages/shop/shopDetail?shopId=' + this.shopId + '&businessId=' + this.businessId)}`
				});
				return;
			}

			// 加载数据 - 并行加载以提高速度
			this.loading = true;
			try {
				// 并行加载多个数据源
				const [
					shopDataRes,
					collectStatusRes,
					categoryDataRes
				] = await Promise.all([
					this.loadShopData(),
					this.checkCollectStatus(),
					this.loadCategoryData()
				]);

				// 记录浏览历史（非阻塞）
				this.recordBrowseHistory();

				// 加载商品数据（加载完后）
				await this.loadAllCategoryProducts();

				// 加载购物车
				await this.loadCart();

				// 加载评价（标签页切换时再加载）
				if (this.activeTab === 'reviews') {
					await this.loadReviews();
				}

				console.log('加载完成 - 商品数据:', this.products);
				console.log('加载完成 - 分类列表:', this.filteredCategories);
			} catch (error) {
				console.error('数据加载失败:', error);
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
				// 初始化分类位置监听
				this.$nextTick(() => {
					this.initCategoryPositions();
				});
			}
		},
		methods: {
			// 处理评价图片加载失败
			handleImageError(e, imgUrl) {
				console.error(`图片加载失败: ${imgUrl}`, e);
				// 设置默认图片
				e.target.src = '/static/default-product.png';
			},

			// 记录浏览历史（非阻塞）
			async recordBrowseHistory() {
				try {
					const userId = this.$store.state.user.userData.userId;
					await this.$api.historyApi.addBrowseHistory({
						businessId: this.businessId || this.shopId, // 商家ID
						customerId: userId // 用户ID
					});
				} catch (error) {
					console.error('记录浏览历史失败:', error);
				}
			},

			calculateCartTotal(items) {
				if (!Array.isArray(items) || items.length === 0) {
					return {
						totalPrice: 0,
						totalQuantity: 0
					};
				}

				// 总价
				return items.reduce((result, item) => {
					const productPrice = Number(item.productPrice) || 0; // 商品单价
					const itemNumber = Number(item.number) || 0; // 商品数量

					return {
						totalPrice: result.totalPrice + (productPrice * itemNumber), // 实时计算总价
						totalQuantity: result.totalQuantity + itemNumber // 实时计算总数量
					};
				}, {
					totalPrice: 0,
					totalQuantity: 0
				}); // 初始值
			},
			// 图片预览
			previewImage(url) {
				if (!url) return;
				uni.previewImage({
					urls: [this.getImageUrl(url)],
					current: 0
				});
			},
			formatTime(timeStr) {
				if (!timeStr) return '';
				return timeStr.substring(0, 5);
			},

			// 获取图片URL
			getImageUrl(imagePath) {
				if (!imagePath) return '/static/default-product.png';
				// 处理相对路径和绝对路径
				if (imagePath.startsWith('http') || imagePath.startsWith('//')) {
					return imagePath;
				}

				// 补充基础路径
				return `/uploadPath/${imagePath}`;
			},
			// 切换标签页
			switchTab(tab) {
				this.activeTab = tab;
				// 懒加载评价数据
				if (tab === 'reviews' && this.reviews.length === 0 && !this.loadingReviews) {
					this.loadReviews();
				}
			},
			initCategoryPositions() {
				this.filteredCategories.forEach(category => {
					const query = uni.createSelectorQuery().in(this);
					query.select(`#category-${category.id}`).boundingClientRect(data => {
						if (data) {
							this.categoryPositions[category.id] = data.top;
						}
					}).exec();
				});
			},

			// 处理商品列表滚动，实现分类联动
			handleProductScroll(e) {
				if (this.activeCategoryId !== null) return;

				const scrollTop = e.detail.scrollTop + 100;

				// 当前滚动到的分类
				let currentCategoryId = null;
				Object.keys(this.categoryPositions).forEach(categoryId => {
					if (this.categoryPositions[categoryId] <= scrollTop) {
						currentCategoryId = Number(categoryId);
					}
				});

				if (currentCategoryId !== this.activeCategoryId) {
					this.activeCategoryId = currentCategoryId;
					this.scrollCategoryToView(currentCategoryId);
				}
			},

			// 滚动左侧分类到可视区域
			scrollCategoryToView(categoryId) {
				if (categoryId === null) {
					this.categoryScrollTop = 0;
					return;
				}

				const index = this.filteredCategories.findIndex(cat => cat.id === categoryId);
				if (index > -1) {
					// 每个分类项高度约为100rpx，计算滚动位置
					this.categoryScrollTop = index * 100;
				}
			},

			// 加载店铺详情数据
			async loadShopData() {
				try {
					let res;
					if (this.businessId) {
						res = await this.$api.shop.getShopInfoByBusinessId(this.businessId);
					} else {
						res = await this.$api.shop.getShopDetail(this.shopId);
					}

					if (res.code === 200) {
						this.shopInfo = res.data || {};
						this.shopInfo.minOrderPrice = Number(this.shopInfo.minOrderPrice) || 0;
					} else {
						uni.showToast({
							title: '加载店铺信息失败',
							icon: 'none'
						});
					}
					return res;
				} catch (error) {
					console.error('加载店铺信息异常:', error);
					throw error;
				}
			},

			// 加载分类数据
			async loadCategoryData() {
				try {
					console.log('准备传递的shopId:', this.shopId);
					const res = await getProductCategories(this.shopId);

					if (res.code === 200) {
						this.allCategories = res.data || [];
						console.log('分类接口返回数据:', this.allCategories);
					} else {
						console.error('分类接口返回错误:', res.msg || '接口异常');
						uni.showToast({
							title: '加载分类失败',
							icon: 'none'
						});
					}
					return res;
				} catch (error) {
					console.warn('分类接口请求失败:', error);
					throw error;
				}
			},

			// 加载所有分类的商品数据 - 并行加载
			async loadAllCategoryProducts() {
				try {
					this.products = {};

					console.log('开始加载所有分类商品，分类数据:', this.filteredCategories);

					// 筛选有效分类
					const validCategories = this.filteredCategories.filter(category => {
						const categoryId = Number(category.id);
						return !isNaN(categoryId) && categoryId > 0;
					});

					// 并行加载所有分类商品，提高速度
					const promises = validCategories.map(category => {
						const categoryId = Number(category.id);
						return getProductsByCategory(categoryId)
							.then(res => {
								if (res.code === 200) {
									return {
										categoryId,
										products: res.data || []
									};
								}
								return {
									categoryId,
									products: []
								};
							})
							.catch(() => ({
								categoryId,
								products: []
							}));
					});

					// 等待所有请求完成
					const results = await Promise.all(promises);

					// 处理结果
					results.forEach(({
						categoryId,
						products
					}) => {
						this.products[categoryId] = products
							.filter(product => Number(product.shopId) === Number(this.shopId))
							.map(product => ({
								id: Number(product.id),
								productName: product.productName || '未知商品',
								categoryId: Number(product.categoryId) || 0,
								price: Number(product.price) || 0,
								description: product.description || '暂无描述',
								productImage: product.productImage || '',
								status: Number(product.status) || 0,
								quantity: 0
							}));
					});

					this.syncProductQuantity();
				} catch (error) {
					console.error('商品加载整体异常:', error);
					throw error;
				}
			},

			// 加载评价数据
			async loadReviews() {
				if (!this.shopId) return;

				this.loadingReviews = true;
				try {
					const res = await this.$api.shop.getShopReviews(this.shopId);
					if (res.code === 200) {
						this.reviews = res.data || [];
						this.calculateReviewsScoreDistribution();
					} else {
						console.error('加载评价失败:', res.msg);
					}
				} catch (error) {
					console.error('加载评价异常:', error);
				} finally {
					this.loadingReviews = false;
				}
			},

			// 计算评价分数分布
			calculateReviewsScoreDistribution() {
				if (this.reviews.length === 0) {
					this.reviewsScoreDistribution = {
						'5星': 0,
						'4星': 0,
						'3星': 0,
						'2星': 0,
						'1星': 0
					};
					return;
				}

				// 初始化计数器
				const counts = {
					1: 0,
					2: 0,
					3: 0,
					4: 0,
					5: 0
				};

				// 统计各星级数量
				this.reviews.forEach(review => {
					const score = review.score || 0;
					if (score >= 1 && score <= 5) {
						counts[score]++;
					}
				});

				// 计算百分比
				const total = this.reviews.length;
				this.reviewsScoreDistribution = {
					'5星': Math.round((counts[5] / total) * 100),
					'4星': Math.round((counts[4] / total) * 100),
					'3星': Math.round((counts[3] / total) * 100),
					'2星': Math.round((counts[2] / total) * 100),
					'1星': Math.round((counts[1] / total) * 100)
				};
			},

			// 获取评价用户头像
			getReviewAvatar(review) {
				if (review.isAnonymous === 1) {
					return '/static/匿名.png';
				}
				return review.userAvatar ? this.getImageUrl(review.userAvatar) : '/static/default-avatar.png';
			},

			// 获取评价用户名
			getReviewUsername(review) {
				if (review.isAnonymous === 1) {
					return '匿名用户';
				}
				return review.userName || '未知用户';
			},

			// 格式化评价时间
			formatReviewTime(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
			},

			// 打开距离输入弹窗
			updateDistance() {
				this.showDistanceModal = true;
			},

			// 关闭距离输入弹窗
			closeDistanceModal() {
				this.showDistanceModal = false;
			},

			// 确认距离修改
			async confirmDistance() {
				if (this.distance === null || this.distance < 0) {
					uni.showToast({
						title: '请输入有效的距离',
						icon: 'none'
					});
					return;
				}

				this.showDistanceModal = false;
				await this.calculateDeliveryFeeByDistance();
			},

			// 检查收藏状态
			async checkCollectStatus() {
				try {
					const userId = this.$store.state.user.userData?.userId;
					if (userId && this.shopId) {
						const checkRes = await this.$api.collectShop.checkCollectStatus(this.shopId, userId);
						if (checkRes.code === 200) {
							this.isCollected = checkRes.data;
						}
						return checkRes;
					}
				} catch (error) {
					console.error('检查收藏状态失败:', error);
				}
			},

			// 加载购物车数据
			async loadCart() {
				try {
					const customerId = this.$store.getters['user/userId'];
					const res = await this.$api.cart.getCartInfo(customerId, this.shopId);

					if (res.code === 200) {
						const cartItems = res.data.items || [];
						// 调用工具方法计算总价和总数量
						const {
							totalPrice,
							totalQuantity
						} = this.calculateCartTotal(cartItems);

						// 购物车
						this.cart = {
							id: res.data.cartId,
							items: cartItems,
							totalPrice: totalPrice, // 计算出的总价
							totalQuantity: totalQuantity // 计算出的总数量
						};

						this.syncProductQuantity();
					} else {
						console.error('获取购物车失败:', res.msg);
						uni.showToast({
							title: '获取购物车失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('购物车加载异常:', error);
					uni.showToast({
						title: '购物车加载异常',
						icon: 'none'
					});
				}
			},

			// 同步购物车数量到商品列表
			syncProductQuantity() {
				if (!this.cart?.items || !this.products) return;

				// 先将所有商品数量清零
				Object.values(this.products).forEach(products => {
					products.forEach(product => {
						product.quantity = 0;
					});
				});

				// 同步购物车中的商品数量
				this.cart.items.forEach(cartItem => {
					for (const categoryId in this.products) {
						const product = this.products[categoryId].find(
							p => p.id.toString() === cartItem.productId.toString()
						);
						if (product) {
							product.quantity = cartItem.number;
							break;
						}
					}
				});
			},

			// 根据分类ID筛选商品
			getProductsByCategoryId(categoryId) {
				if (categoryId === null) {
					// 返回所有分类的商品
					return Object.values(this.products).flat();
				}
				return this.products[categoryId] || [];
			},

			// 获取总商品数量
			getTotalProductCount() {
				return Object.values(this.products).flat().length;
			},

			// 获取分类商品数量
			getCategoryProductCount(categoryId) {
				return this.getProductsByCategoryId(categoryId).length;
			},

			// 获取分类名称
			getCategoryName(categoryId) {
				const category = this.allCategories.find(c => Number(c.id) === Number(categoryId));
				return category?.categoryName || '未知分类';
			},

			// 选择分类
			selectCategory(categoryId) {
				this.activeCategoryId = categoryId;
				this.productScrollTop = 0;
				if (categoryId !== null) {
					this.$nextTick(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select(`#category-${categoryId}`).boundingClientRect(data => {
							if (data) {
								this.productScrollTop = data.top - 100; // 偏移顶部100rpx
							}
						}).exec();
					});
				}
			},

			showProductDetail(product) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${product.id}&shopId=${this.shopId}`
				});
			},

			goSearch() {
				uni.navigateTo({
					url: `/pages/product/search?shopId=${this.shopId}`
				});
			},

			toggleCart() {
				this.showCart = !this.showCart;
				document.body.style.overflow = this.showCart ? 'hidden' : 'auto';
			},

			async handleQuantityChange(product, quantity) {
				if (product.status !== 1) {
					uni.showToast({
						title: '商品已下架',
						icon: 'none'
					});
					return;
				}

				this.loading = true;
				try {
					// 初始化购物车
					if (!this.cart.id) {
						const customerId = this.$store.state.user.id;
						const initRes = await this.$api.cart.initCart({
							customerId,
							businessId: this.businessId
						});
						if (initRes.code !== 200) throw new Error('初始化购物车失败');
						this.cart.id = initRes.data.cartId;
					}

					// 判断是添加新商品还是修改已有商品数量
					if (product.quantity === 0 && quantity > 0) {
						// 添加新商品
						const addRes = await this.$api.cart.addCartItem({
							cartId: this.cart.id,
							productId: product.id,
							number: quantity,
							productPrice: product.price
						});

						if (addRes.code === 200) {
							const newCartItems = addRes.data.items || [];
							const {
								totalPrice,
								totalQuantity
							} = this.calculateCartTotal(newCartItems);

							this.cart = {
								id: addRes.data.cartId || this.cart.id,
								items: newCartItems,
								totalPrice,
								totalQuantity
							};

							product.quantity = quantity;
						}
					} else {
						// 修改商品数量
						const operationType = quantity > product.quantity ? 'ADD' : 'REDUCE';
						const res = await this.$api.cart.operateCartItem({
							cartId: this.cart.id,
							productId: product.id,
							operationType
						});

						if (res.code === 200) {
							const newCartItems = res.data.items || [];
							const {
								totalPrice,
								totalQuantity
							} = this.calculateCartTotal(newCartItems);

							this.cart = {
								id: res.data.cartId || this.cart.id,
								items: newCartItems,
								totalPrice,
								totalQuantity
							};

							product.quantity = quantity;
						}
					}

					uni.showToast({
						title: quantity > 0 ? '已更新购物车' : '已移除商品',
						icon: 'none'
					});
				} catch (error) {
					console.error('更新购物车失败:', error);
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			async handleCartItemChange(item, quantity) {
				// 查找商品所在的分类
				let product = null;
				Object.values(this.products).some(categoryProducts => {
					product = categoryProducts.find(p => Number(p.id) === Number(item
						.productId));
					return product !== null;
				});

				if (product) {
					await this.handleQuantityChange(product, quantity);
				}
			},

			// 切换收藏状态
			async toggleCollect() {
				const userId = this.$store.state.user.userData?.userId;
				const shopId = this.shopId;

				if (!userId || !shopId) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}

				try {
					if (this.isCollected) {
						// 取消收藏 - 使用查询参数
						const res = await this.$api.collectShop.cancelCollectByBusinessAndCustomer(
							shopId, // businessId
							userId // customerId
						);

						if (res.code === 200) {
							this.isCollected = false;
							uni.showToast({
								title: '已取消收藏',
								icon: 'none'
							});
						}
					} else {
						// 添加收藏 - 使用JSON
						const res = await this.$api.collectShop.addCollectShop({
							businessId: shopId,
							customerId: userId
						});

						if (res.code === 200) {
							this.isCollected = true;
							uni.showToast({
								title: '收藏成功',
								icon: 'success'
							});
						}
					}
				} catch (error) {
					console.error('收藏操作失败:', error);
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				}
			},

			async clearCart() {
				uni.showModal({
					title: '提示',
					content: '确定要清空购物车吗？',
					success: async (res) => {
						if (res.confirm) {
							this.loading = true;
							try {
								const res = await this.$api.cart.clearCart(this.cart.id);
								if (res.code === 200) {
									const {
										totalPrice,
										totalQuantity
									} = this.calculateCartTotal([]);
									this.cart = {
										id: this.cart.id,
										items: [],
										totalPrice: totalPrice, // 0
										totalQuantity: totalQuantity // 0
									};
									this.syncProductQuantity();
									uni.showToast({
										title: '已清空购物车',
										icon: 'none'
									});
								}
							} catch (error) {
								console.error('清空购物车失败:', error);
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								});
							} finally {
								this.loading = false;
							}
						}
					}
				});
			},

			goToCheckout() {
				if (this.cart.totalQuantity === 0) {
					uni.showToast({
						title: '购物车暂无商品',
						icon: 'none'
					});
					return;
				}
				if (this.cart.totalPrice < this.shopInfo.minOrderPrice) {
					uni.showToast({
						title: `还差￥${(this.shopInfo.minOrderPrice - this.cart.totalPrice).toFixed(2)}起送`,
						icon: 'none'
					});
					return;
				}

				const totalAmount = this.cart.totalPrice + (this.deliveryInfo.deliveryFee || 0);

				uni.navigateTo({
					url: `/pages/order/create?cartId=${this.cart.id}&shopId=${this.shopId}&totalPrice=${totalAmount}&deliveryFee=${this.deliveryInfo.deliveryFee || 0}&shopName=${encodeURIComponent(this.shopInfo.shopName)}`,
					success: (res) => {
						// 传递全部购物车商品
						res.eventChannel.emit('acceptSelectedItems', {
							selectedItems: this.cart.items
						});
					}
				});

				this.toggleCart();
			},


			// 计算配送费用
			async calculateDeliveryFeeByDistance() {
				try {
					const res = await calculateDeliveryFee({
						distance: this.deliveryInfo.distance,
						shopId: this.shopId
					});
					if (res.code === 200) {
						this.deliveryInfo.deliveryFee = res.data.deliveryFee || 0;
					}
				} catch (error) {
					console.error('计算配送费失败:', error);
				}
			}

		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.stars {
		position: relative;
		display: inline-block;
		font-size: 30rpx;
		color: #ddd;
		margin: 10rpx 0;
		letter-spacing: 2rpx;

		.stars-bg {
			position: relative;
			z-index: 1;
		}

		.stars-fg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			color: #ffd700;
			overflow: hidden;
			white-space: nowrap;
		}
	}

	.container {
		width: 100%;
		overflow: hidden;
	}

	/* 商家头部信息 */
	.shop-header {
		width: 100%;

		.shop-banner {
			width: 100%;
			height: 300rpx;
			display: block;
			object-fit: cover;
			background-color: #eee;
		}

		/* 商家信息 */
		.image-preview {
			position: relative;
			width: 100%;
			height: 300rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.shop-image,
			.license-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.image-desc {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: rgba(0, 0, 0, 0.5);
				color: #fff;
				padding: 10rpx;
				text-align: center;
				font-size: 24rpx;
			}
		}

		.shop-card {
			background-color: #fff;
			margin: -60rpx 30rpx 20rpx;
			border-radius: 20rpx;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
			padding: 30rpx;
			position: relative;
			z-index: 2;

			.shop-main-info {
				display: flex;
				margin-bottom: 25rpx;

				.shop-logo {
					width: 140rpx;
					height: 140rpx;
					border-radius: 16rpx;
					border: 4rpx solid #fff;
					box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
					flex-shrink: 0;
				}

				.shop-basic {
					margin-left: 25rpx;
					flex: 1;

					.shop-name-rating {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.shop-name {
							font-size: 36rpx;
							font-weight: bold;
							color: #333;
							max-width: 400rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.rating {
							display: flex;
							align-items: center;
							background-color: #fff8e6;
							padding: 5rpx 15rpx;
							border-radius: 20rpx;

							.star {
								color: #ff9800;
								font-size: 26rpx;
								margin-right: 5rpx;
							}

							.score {
								color: #ff7d00;
								font-size: 28rpx;
								font-weight: bold;
							}
						}

						.collect-btn {
							display: flex;
							align-items: center;
							background-color: #fff0f6;
							padding: 5rpx 15rpx;
							border-radius: 20rpx;
							color: #ff5a5f;
							font-size: 26rpx;

							.icon {
								margin-right: 5rpx;
								font-size: 26rpx;
							}
						}
					}

					.shop-tags {
						display: flex;
						flex-wrap: wrap;
						gap: 10rpx;
						margin: 15rpx 0;

						.shop-tag {
							background-color: #f0f7ff;
							color: #2196f3;
							font-size: 22rpx;
							padding: 5rpx 15rpx;
							border-radius: 15rpx;
						}

						.status-closed {
							background-color: #fef0f0;
							color: #f5222d;
						}

						.status-rest {
							background-color: #f0f2f5;
							color: #4e5969;
						}
					}

					.shop-hours {
						display: flex;
						align-items: center;
						color: #666;
						font-size: 24rpx;

						.icon {
							margin-right: 8rpx;
							font-size: 26rpx;
						}
					}
				}
			}

			.delivery-info {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 20rpx 0;
				border-top: 1rpx solid #f5f5f5;
				border-bottom: 1rpx solid #f5f5f5;
				margin-bottom: 20rpx;

				.delivery-item {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.label {
						color: #999;
						font-size: 24rpx;
						width: 100rpx;
					}

					.value {
						color: #333;
						font-size: 24rpx;
						flex: 1;
					}

					.update-distance {
						color: #2196f3;
						font-size: 24rpx;
						padding: 0;
						background: transparent;
						line-height: normal;
						height: auto;
					}
				}
			}
		}
	}

	/* 标签页 */
	.tabs {
		display: flex;
		background-color: #fff;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;

		.tab-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #666;
			position: relative;
			height: 100%;

			&.active {
				color: #ff5a5f;
				font-weight: bold;
			}

			.tab-underline {
				position: absolute;
				bottom: 0;
				width: 60rpx;
				height: 6rpx;
				background-color: #ff5a5f;
				border-radius: 3rpx;
			}
		}
	}

	.search-box {
		background-color: #fff;
		margin: 0 30rpx 20rpx;
		padding: 15rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.icon {
			margin-right: 10rpx;
			font-size: 30rpx;
			color: #999;
		}

		input {
			flex: 1;
			font-size: 26rpx;
			color: #666;
			height: 40rpx;
			line-height: 40rpx;
		}
	}

	.product-area {
		display: flex;
		height: calc(100vh - 650rpx);
		margin-bottom: 120rpx;
	}

	.category-sidebar {
		width: 180rpx;
		background-color: #f8f8f8;

		.sidebar-item {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 26rpx;
			color: #666;
			border-left: 4rpx solid transparent;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.3s ease;

			&.active {
				color: #ff5a5f;
				font-weight: bold;
				background-color: #fff;
				border-left: 4rpx solid #ff5a5f;
			}

			.item-count {
				position: absolute;
				right: 20rpx;
				top: 25rpx;
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 20rpx;
				background-color: #ff5a5f;
				color: #fff;
				border-radius: 50%;
			}
		}
	}

	.product-list {
		flex: 1;
		padding: 0 20rpx;
		background-color: #fff;

		.loading {
			text-align: center;
			padding: 50rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 15rpx;
			color: #999;
			font-size: 26rpx;
		}

		.product-category {
			font-size: 28rpx;
			font-weight: bold;
			margin: 20rpx 0;
			padding: 10rpx 0 10rpx 15rpx;
			background-color: #f9f9f9;
			color: #333;
			border-left: 4rpx solid #ff5a5f;
			position: sticky;
			top: 0;
			z-index: 10;
		}

		.product-list-wrap {
			display: flex;
			flex-direction: column;
			gap: 10rpx;
			padding-bottom: 20rpx;
			border-bottom: 10rpx solid #f5f5f5;
		}

		.product-item {
			display: flex;
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			margin-bottom: 10rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
			align-items: center;
			transition: transform 0.2s ease;

			&:hover {
				transform: translateY(-2rpx);
			}

			.product-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.product-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				min-height: 160rpx;

				.product-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.product-desc {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 10rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					line-height: 1.4;
				}

				.product-price {
					font-size: 28rpx;
					color: #ff5a5f;
					font-weight: bold;
					margin-top: auto;
				}
			}

			.number-control {
				width: 180rpx;
				height: 60rpx;
				flex-shrink: 0;
			}
		}

		.empty-tip {
			text-align: center;
			padding: 100rpx 0;
			color: #999;
			font-size: 26rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20rpx;

			image {
				width: 150rpx;
				height: 150rpx;
				opacity: 0.5;
			}
		}
	}

	/* 评价 */
	.reviews-container {
		padding-bottom: 20rpx;

		.reviews-summary {
			background-color: #fff;
			padding: 30rpx;
			display: flex;
			margin-bottom: 20rpx;

			.overall-score {
				flex: 0 0 200rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.score {
					font-size: 60rpx;
					font-weight: bold;
					color: #ff5a5f;
					line-height: 1;
				}

				.stars {
					font-size: 30rpx;
					color: #ffd700;
					margin: 10rpx 0;
					letter-spacing: 2rpx;
				}

				.desc {
					font-size: 24rpx;
					color: #999;
				}
			}

			.score-details {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.score-item {
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;

					.label {
						font-size: 24rpx;
						color: #666;
						width: 80rpx;
					}

					.progress-bar {
						flex: 1;
						height: 10rpx;
						background-color: #eee;
						border-radius: 5rpx;
						overflow: hidden;

						.progress {
							height: 100%;
							background-color: #ff5a5f;
						}
					}

					.value {
						font-size: 24rpx;
						color: #666;
						width: 60rpx;
						text-align: right;
						margin-left: 15rpx;
					}
				}
			}
		}

		.reviews-filter {
			display: flex;
			background-color: #fff;
			padding: 0 20rpx;
			margin-bottom: 20rpx;

			.filter-item {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				color: #666;
				position: relative;

				&.active {
					color: #ff5a5f;
					font-weight: bold;
				}

				&.active::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 50rpx;
					height: 6rpx;
					background-color: #ff5a5f;
					border-radius: 3rpx;
				}
			}
		}

		.reviews-list {
			height: calc(100vh - 550rpx);
			background-color: #fff;

			.review-item {
				padding: 30rpx;
				border-bottom: 1rpx solid #f5f5f5;

				.review-header {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.user-info {
						flex: 1;

						.username {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 10rpx;
							display: block;
						}

						.stars {
							position: relative;
							display: inline-block;
							font-size: 24rpx;
							color: #ddd;
							letter-spacing: 2rpx;
							overflow: hidden;
						}

						.stars-bg {
							position: relative;
							z-index: 1;
						}

						.stars-fg {
							position: absolute;
							top: 0;
							left: 0;
							z-index: 2;
							color: #ffd700;
							overflow: hidden;
							white-space: nowrap;
						}
					}

					.time {
						font-size: 24rpx;
						color: #999;
					}
				}

				.review-content {
					font-size: 28rpx;
					color: #333;
					line-height: 1.5;
					margin-bottom: 20rpx;
				}

				/* 修复评价图片显示 */
				.review-images {
					display: flex;
					flex-wrap: wrap;
					gap: 15rpx;
					margin-bottom: 20rpx;
					overflow: hidden;
				}

				.review-image-wrapper {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					overflow: hidden;
					background-color: #f5f5f5;
				}

				.review-image {
					width: 100%;
					height: 100%;
					object-fit: cover;
					display: block;
				}

				.review-reply {
					background-color: #f9f9f9;
					padding: 20rpx;
					border-radius: 10rpx;

					.reply-label {
						font-size: 26rpx;
						color: #666;
						font-weight: bold;
					}

					.reply-content {
						font-size: 26rpx;
						color: #333;
					}

					.reply-time {
						display: block;
						font-size: 22rpx;
						color: #999;
						margin-top: 10rpx;
						text-align: right;
					}
				}
			}

			.loading {
				text-align: center;
				padding: 50rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 15rpx;
				color: #999;
				font-size: 26rpx;
			}

			.empty-tip {
				text-align: center;
				padding: 200rpx 0;
				color: #999;
				font-size: 26rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20rpx;

				image {
					width: 150rpx;
					height: 150rpx;
					opacity: 0.5;
				}
			}
		}
	}

	/* 商家信息 */
	.shop-info-container {
		padding: 20rpx;

		.basic-info-card,
		.image-info-card,
		.business-license-card {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		}

		.card-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			padding-bottom: 15rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}

		.info-item {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.label {
				font-size: 28rpx;
				color: #666;
				width: 180rpx;
			}

			.value {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				line-height: 1.5;
			}
		}

		.shop-image,
		.license-image {
			width: 100%;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}
	}

	.cart-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 99;

		.cart-icon {
			width: 100rpx;
			height: 100rpx;
			position: relative;
			margin-right: 10rpx;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
			}

			.cart-badge {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background-color: #ff5a5f;
				color: #fff;
				border-radius: 50%;
				font-size: 24rpx;
				font-weight: bold;
			}
		}

		.cart-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.cart-total {
				font-size: 28rpx;
				color: #333;

				.total-price {
					color: #ff5a5f;
					font-weight: bold;
					font-size: 30rpx;
				}
			}

			.cart-subtip {
				font-size: 22rpx;
				color: #ff5a5f;
				margin-top: 5rpx;
			}

			.delivery-fee-line {
				color: #666;
			}

			.subtip-text {
				background-color: rgba(255, 90, 95, 0.1);
				padding: 2rpx 10rpx;
				border-radius: 4rpx;
			}
		}

		.checkout-btn {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #ff5a5f;
			color: #fff;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-weight: bold;
			flex-shrink: 0;
			transition: background-color 0.3s;

			&:active {
				background-color: #e04a4f;
			}
		}

		.checkout-btn.disabled {
			background-color: #ccc;
			color: #999;
			pointer-events: none;
		}
	}

	.cart-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;

		.cart-popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.cart-popup-content {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			max-height: 80vh;

			.cart-header {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				border-bottom: 1rpx solid #eee;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}

				.clear-btn {
					font-size: 26rpx;
					color: #ff5a5f;
				}
			}

			.cart-items {
				height: calc(80vh - 220rpx);
				padding: 20rpx 30rpx;

				.cart-item {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #f5f5f5;

					.item-image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 8rpx;
						margin-right: 20rpx;
						flex-shrink: 0;
					}

					.item-info {
						flex: 1;

						.item-name {
							font-size: 26rpx;
							color: #333;
							margin-bottom: 10rpx;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							overflow: hidden;
						}

						.item-price {
							font-size: 26rpx;
							color: #ff5a5f;
							font-weight: bold;
						}
					}

					/* 修复购物车+号键被遮挡 */
					.cart-number-control {
						width: 200rpx;
						height: 60rpx;
						flex-shrink: 0;
						padding-left: 20rpx;
					}
				}

				.cart-empty {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 20rpx;
					color: #999;
					font-size: 26rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						opacity: 0.5;
					}
				}
			}

			.cart-footer-info {
				padding: 20rpx 30rpx;
				border-top: 1rpx solid #eee;

				.footer-line {
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
					margin-bottom: 15rpx;

					.price {
						color: #ff5a5f;
						font-weight: bold;
					}
				}

				.total {
					font-weight: bold;
					font-size: 28rpx;
					padding-top: 10rpx;
					border-top: 1rpx dashed #eee;
				}

				.confirm-btn {
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					background-color: #ff5a5f;
					color: #fff;
					border-radius: 10rpx;
					font-size: 30rpx;
					font-weight: bold;
					margin-top: 15rpx;
				}
			}
		}
	}

	.distance-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1010;

		.modal-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modal-content {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 600rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;

			.modal-title {
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 30rpx;
			}

			.distance-input {
				width: 100%;
				height: 80rpx;
				border: 1rpx solid #ddd;
				border-radius: 10rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				margin-bottom: 30rpx;
			}

			.modal-buttons {
				display: flex;
				gap: 20rpx;

				.cancel-btn,
				.confirm-btn {
					flex: 1;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 10rpx;
					font-size: 28rpx;
				}

				.cancel-btn {
					background-color: #f5f5f5;
					color: #666;
				}

				.confirm-btn {
					background-color: #ff5a5f;
					color: #fff;
				}
			}
		}
	}
</style>